<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=8"><!--以IE8模式渲染-->
    <title> 后端管理系统</title>
    <link href="http://cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/main.css">
    <!--[if lt IE 9]>
    <script src="./js/html5.js"></script>
    <script src="./js/respond.min.js"></script>
    <![endif]-->
</head>
<body id="container">
<nav>
    <ul>
        <li>
            <i class="fa fa-navicon fa-lg toggle-nav" style="font-size: 25px;"></i>
            <a href="" class="a-logo">水晶球教育后台管理系统</a>
        </li>
        <li class="nav-li-manage">
            <img class="manage_avatar" src="http://demo.mycodes.net/houtai/AdminLTE/dist/img/user2-160x160.jpg" alt="">
            <a href="#">管理员</a>
            <span class="fa  fa-caret-right arrow" style="float: right;line-height: 55px"></span>
            <ul>
                <li>个人资料</li>
                <li>修改密码</li>
                <li>设置</li>
                <li>登出</li>
            </ul>
        </li>
    </ul>
</nav>
<section>
    <div id="sidebar">
        <ul class="sidebar-menu">
            <li>
                <a href="index.html">
                    <i class="fa fa-home fa-fw"></i>
                    <span>主页</span>
                </a>
            </li>
            <li>
                <a href="tab.html">
                    <i class="fa fa-home fa-fw"></i>
                    <span>tab页</span>
                </a>
            </li>
            <li class="toggle-li">
                <a>
                    <i class="fa fa-stop-circle-o fa-fw"></i>
                    <span>系统管理</span>
                    <span class="fa  fa-caret-right arrow"></span>
                </a>
                <ul class="sub">
                    <li><a class="" href="manage_user.html">系统用户管理</a></li>
                    <li><a class="" href="users.html">用户管理</a></li>
                </ul>
            </li>
            <li>
                <a href="awesome.html">
                    <i class="fa fa-home fa-fw"></i>
                    <span>font-awesome</span>
                </a>
            </li>
            <li class="toggle-li">
                <a>
                    <i class="fa fa-stop-circle-o fa-fw"></i>
                    <span>常用 UI组件</span>
                    <span class="fa  fa-caret-right arrow"></span>
                </a>
                <ul class="sub">
                    <li><a class="" href="button.html">按钮</a></li>
                    <li><a class="" href="form.html">表单</a></li>
                    <li><a class="" href="table.html">表格</a></li>
                </ul>
            </li>
            <li class="toggle-li">
                <a>
                    <i class="fa fa-stop-circle-o fa-fw"></i>
                    <span>Jquery 插件</span>
                    <span class="fa  fa-caret-right arrow"></span>
                </a>
                <ul class="sub">
                    <li><a class="" href="datatables.html">datatables 表格</a></li>
                    <li><a class="" href="select2.html">select2 下拉框</a></li>
                    <li><a class="" href="layui.html">layui 弹出层</a></li>
                </ul>
            </li>

        </ul>
    </div>
    <section class="wrapper toggle-wrapper">

        <div class="tab-nav">
            <span class="tab-nav-span tab-nav_checked" data-nav="wrapper1">设置</span>
            <span class="tab-nav-span" data-nav="wrapper2">第二页</span>
            <span class="tab-nav-span" data-nav="wrapper3">第三页</span>
            <span class="tab-nav-span" data-nav="wrapper4">第四页</span>
        </div>
        <div class="wrapper1 wrappers">
            <form class="form-horizontal">
                <div class="form-group">
                    <label for="inputName" class="col-sm-2 control-label">姓名</label>
                    <div class="col-sm-10">
                        <input type="email" class="form-control" id="inputName" placeholder="姓名">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputEmail" class="col-sm-2 control-label">邮箱</label>
                    <div class="col-sm-10">
                        <input type="email" class="form-control" id="inputEmail" placeholder="邮箱">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputName" class="col-sm-2 control-label">姓名</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="inputName" placeholder="姓名">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputExperience" class="col-sm-2 control-label">经历</label>
                    <div class="col-sm-10">
                        <textarea class="form-control" id="inputExperience" placeholder="经历"></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputSkills" class="col-sm-2 control-label">技能</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="inputSkills" placeholder="技能">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox"> 我同意<a href="#">条件和条款</a>
                            </label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-danger">提交</button>
                    </div>
                </div>
            </form>
        </div>
        <div class="wrapper2 wrappers">
            <iframe src="datatables.html" width="100%" height="700px"></iframe>
        </div>
        <div class="wrapper3 wrappers">
            <iframe src="table.html" width="100%" height="700px"></iframe>
        </div>
        <div class="wrapper4 wrappers">
            <iframe src="users.html" width="100%" height="700px"></iframe>
        </div>
        <style>
            .tab-nav {
                background-color: #fff;
                margin-top: 80px;
                height: 42px;
                border-left: 1px solid #ccc;
                border-right: 1px solid #ccc;
                border-top: 1px solid #ccc;
            }

            .tab-nav span {
                text-align: center;
                font-size: 13px;
                color: #333;
                font-weight: bold;
                width: 65px;
                display: inline-block;
                height: 42px;
                font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
                line-height: 42px;
            }

            .tab-nav .tab-nav_checked {
                height: 43px;
                border-top: 3px solid #3c8dbc;
            }

            .wrappers {
                position: relative;
                font-size: 13px;
                padding: 0 20px;
                display: none;
                border: 1px solid #ccc;
                border-top: none;
            }

            .wrapper1 {
                display: block;
            }
        </style>
    </section>
</section>


</body>
<script src="js/jquery.js"></script>
<script src="js/zhao.js"></script>
<script>
    $(".tab-nav").on("click", "span", function (e) {
        var e = e || window.event;
        var $e = $(e.target);
        $(".tab-nav-span").removeClass("tab-nav_checked");
        $e.addClass("tab-nav_checked")
        $(".wrappers").hide();
        $("." + $e.attr("data-nav")).show();
    })
</script>
</html>